<script setup>
import { ref, defineProps, defineEmits, onMounted } from 'vue';
import { saveUser, queryDepts, queryJob, updateUser } from "@/utils/api";
import axios from 'axios';
import { Check, Close, Delete, Edit, Message, Search, Star, Plus } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from "element-plus";

//声明事件 关闭事件
const emits = defineEmits(["close", "refreshData"]);

//定义属性
const props = defineProps({
    visible: {
        type: Boolean,
        required: true,
        default: false
    }
})


//定义消息框是否显示
// const visible = ref(true)
const deptoptions = ref([]);//部门列表
const joboptions = ref([]);//职位列表
const tmpdept = ref();//存储部门名称
const temjob = ref();//存储职位名称
// const isjob = ref(true);//是否禁用职位下拉列表
//定义用户对象
const user = ref({
    name: "",
    gender: 1,
    deptId: "",
    deptNo: "",
    mobile: "",
    jobId: "",
    username: "",
    status: 1,
    password: "",
    note: "",
});

//声明初始方法
function init(data) {
    console.log(data);
    if (data) {
        //data存在，说明是修改
        user.value = data;
    } else {
        //否则为新增，将user的值还原
        user.value = {
            name: "",
            gender: 1,
            deptId: "",
            deptNo: "",
            mobile: "",
            jobId: "",
            username: "",
            status: 1,
            password: "",
            note: "",
        };
    }
}
//保存方法
// async function save() {
//     console.log("要保存的用户信息", user.value);
//     await saveUser(user.value).then((res) => {
//         if (res.code == 1) {
//             ElMessage({
//                 message: "保存成功",
//                 type: "success",
//             });
//         }
//     });
//     //关闭
//     close();
//     //通知父组件跟新数据
//     emits("refreshData")
// }
function save() {
    let promise;
    if (user.value.id) {
        //修改用户
        console.log("修改信息：",user.value);
        promise = updateUser(user.value)
    } else {
        //新增用户
        promise = saveUser(user.value)
    }
    promise.then((res) => {
        if (res.code == 1) {
            ElMessage({
                message: "保存成功",
                type: "success",
            });
            //关闭
            close();
            //通知父组件更新数据
            emits("refreshData")
        }
    })
}

//关闭弹窗时调用的方法
function close() {
    //抛出事件 父组件 同时传递值
    emits("close", false);
    user.value = {
            name: "",
            gender: 1,
            deptId: "",
            deptNo: "",
            mobile: "",
            jobId: "",
            username: "",
            status: 1,
            password: "",
            note: "",
        };
         tmpdept.value='';
         temjob.value=''
}

//查询部门
async function queryDept() {
    const res = await queryDepts();
    console.log("部门列表:", res);
    if (res.code == 1) {
        deptoptions.value = res.data;
    }
}

//当部门发生变化的时
async function chg(dept) {
    let tmp = await dept.split("!");
    user.value.deptId = await tmp[0];
    user.value.deptNo = await tmp[1];
    console.log("部门id和部门编号:", user.value.deptId, user.value.deptNo);
    let params = {
        deptId: user.value.deptId
    };
    const res = await queryJob(params);
    console.log("对应的岗位:", res);
    if (res.code == 1) {
        joboptions.value = res.data;
    }

}

function chg1(job){
    console.log("选择职位列表拿到的值：",job);
    user.value.jobId=job,
    console.log("职位id:",user.value.jobId);
}

/******************生命周期********** */
onMounted(() => {
    queryDept();
});
//暴露方法
defineExpose({ init });

</script>
<template>
    <el-dialog :model-value="visible" :title="user.id ? '修改用户' : '添加用户'" width="50%" :close-on-click-modal="false"
        @close="close" draggable>
        <!--基本信息-->
        <div class="basic">
            <div style="font-weight: bold">员工信息</div>
            <el-row>
                <el-col :span="3">员工名称:</el-col>
                <el-col :span="9">
                    <el-input v-model="user.name" placeholder="请输入员工名称" clearable :disabled="user.id != undefined" /></el-col>
                <el-col :span="3">性别:</el-col>
                <el-col :span="9">
                    <el-radio-group v-model="user.gender">
                        <el-radio :label="1">男</el-radio>
                        <el-radio :label="2">女</el-radio>
                        <el-radio :label="3">保密</el-radio>
                    </el-radio-group>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="3">部门:</el-col>
                <el-col :span="9">
                    <el-select v-model="tmpdept" clearable :placeholder="user.id && user.dept ?user.dept.deptName:'请选择部门'" @change="chg">
                        <el-option v-for="item in deptoptions" :key="item.id" :label="item.deptName"
                            :value="item.id + '!' + item.deptNo" />
                    </el-select>
                </el-col>
                <el-col :span="3">手机号码:</el-col>
                <el-col :span="9">
                    <el-input v-model="user.mobile" placeholder="请输入手机号码" clearable /></el-col>
            </el-row>
            <el-row>
                <el-col :span="3">职位:</el-col>
                <el-col :span="9">
                    <el-select v-model="temjob" clearable :placeholder="user.id && user.job ?user.job.name :'请选择职位'" @change="chg1">
                        <el-option v-for="item in joboptions" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-col>
                <el-col :span="12">&nbsp;</el-col>
            </el-row>
        </div>

        <!--账号信息-->
        <div class="basic" style="margin-top: 20px">
            <el-row>
                <el-col :span="3">账号:</el-col>
                <el-col :span="9">
                    <el-input v-model="user.username" placeholder="请输入账号" clearable :disabled="user.id != undefined" />
                </el-col>
                <el-col :span="3">状态:</el-col>
                <el-col :span="9">
                    <el-switch v-model="user.status" class="mt-2" inline-prompt :active-icon="Check" :inactive-icon="Close"
                        :active-value="1" :inactive-value="2" />

                </el-col>
            </el-row>
            <el-row>
                <el-col :span="3" :hidden="user.id != undefined">密码:</el-col>
                <el-col :span="9" :hidden="user.id != undefined">
                    <el-input v-model="user.password" placeholder="请输入密码" type="password" clearable show-password />
                </el-col>
                <el-col :span="3">备注:</el-col>
                <el-col :span="9">
                    <el-input v-model="user.note" placeholder="请输入备注" clearable /></el-col>
            </el-row>
        </div>

        <!--按钮-->
        <div class="btn">
            <el-button type="primary" @click="save">保存</el-button>
            <el-button style="margin-left: 60px" @click="close">取消</el-button>
        </div>
    </el-dialog>
</template>
<style scoped>
.basic {
    width: 100%;
    border: #eee solid 1px;
    padding: 5px;
}

:deep(.el-row) {
    display: flex;
    align-items: center;
    margin: 15px 0;
}

:deep(.el-col-3) {
    text-align: center;
}

.btn {
    text-align: center;
    margin-top: 20px;
}
</style>